<template>
	<view class="box">
		<view class="top">
			<view class="top-top">
				<view class="left">
					<uni-icons type="location" size="30"></uni-icons>
					<text class="lefttext">张家口</text>
				</view>
				<view class="content">
					<swiper vertical :autoplay="true" circular :interval="3000" class="c1">
						<swiper-item v-for="i in data">
							<view class="swiper-item">{{i}}</view>
						</swiper-item>
					</swiper>
				</view>
				<uni-icons type="search" size="30"></uni-icons>
			</view>
			<view class="bottom">
				<view class="b1" @click="open=true">
					<image src="../../static/筛选.png" mode=""></image> <text class="btext"> 筛选</text>
				</view>
				<view class="b1">
					<image src="../../static/时间.png" mode=""></image> <text class="btext"> 时间</text>
				</view>
				<view class="b1" @click="open1=true">
					<image src="../../static/排序.png" mode=""></image> <text> {{sortdata[sorttype]}}</text>
				</view>
			</view>
		</view>
		<view class="data" v-for="i in activitys" @click="tzxq(i._id,i.aid)">
			<view class="left">
				<image :src="i.imgurl" mode="widthFix"></image>
			</view>

			<view class="right">
				<view class="rtitle">
					{{i.title}}
				</view>
				<text>{{i.time.split(' ')[0]}} </text>
				<text>{{i.Live=='672b23fbb42874319450de09'?"线上活动":i.address}}</text>
				<text>{{i.Free=="672b242db42874319450de0d"?"免费":i.price}}</text>
			</view>
		</view>
		<view class="sortbox" v-show="open1">
			<view class="sort">
				<text :class="sorttype==index?'color':''" @click="setsorttype(index)" v-for="(item,index) in sortdata"
					:key="index">{{item}}</text>
			</view>
		</view>
		<view class="show" v-show="open">
			<view class="adddz">
				<uni-icons class="close" @click="open=false" type="closeempty" size="30"></uni-icons>
				<view class="atype">
					<view v-for="i in adata">
						<view class="atext">{{i.atname}}</view>
						<view class="btext">
							<view :class="sxbox.includes(ii._id)?'btext2':'btext1'" @click="addsxbox(ii._id)"
								v-for="ii in (bdata.filter(item=>item.aid==i._id))">
								{{ii.btname}}
							</view>
						</view>
					</view>
					<view class="bbut">
						<button @click="sxbox=[]">重置</button><button>确定</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, computed } from 'vue';
	let data = ref(['展会', 'ALGC', '出海', '零售', '读书'])
	let sortdata = ref(['综合排序', '最新发布', '热门点击', '最多参与'])
	let sorttype = ref(0)
	let open = ref(false)
	let open1 = ref(false)
	let adata = ref([])
	let sxbox = ref([])
	let bdata = ref([])
	let cdata = ref([])
	let activitys = ref([])
	let tzxq=(id,aid)=>{
		uni.navigateTo({
			url:`/pages/activitydetail/activitydetail?id=${id}&aid=${aid}`
		})
	}
	let getactivity = () => {
		uni.request({
			url: 'http://127.0.0.1:3000/xaw/getactivity',
			success(res) {
				activitys.value = res.data.data
			}
		})
	}

	let hddata = computed(() => {
		return cdata.value.filter(item => item.bid == '672b2619b42874319450de11')
	})
	let setsorttype = (index) => {
		sorttype.value = index
		open1.value = false
	}
	let geta = () => {

		uni.request({
			url: 'http://127.0.0.1:3000/xaw/getatype',
			method: 'GET',
			success(res : any) {
				adata.value = res.data.data
			}
		})
	}
	let getb = () => {
		uni.request({
			url: 'http://127.0.0.1:3000/xaw/getbtype',
			method: 'GET',
			success(res : any) {
				bdata.value = res.data.data
			}
		})
	}
	let addsxbox = (id) => {
		let index = sxbox.value.findIndex(i => i == id)
		if (index == -1) {
			sxbox.value.push(id)
		} else {
			sxbox.value.splice(index, 1)
		}
		console.log(sxbox.value);
	}
	let getc = () => {
		uni.request({
			url: 'http://127.0.0.1:3000/xaw/getctype',
			method: 'GET',
			success(res : any) {
				cdata.value = res.data.data
			}
		})
	}
	onMounted(() => {
		geta()
		getb()
		getc()
		getactivity()
	})
</script>

<style lang="scss" scoped>
	.box {
		.data {
			display: flex;
			padding: 30rpx;
			box-sizing: border-box;
			width: 750rpx;
			height: 280rpx;
			border-bottom: #DDDBDC 1px solid;

			.left {
				width: 350rpx;
				height: 208rpx;
				border-radius: 10rpx;
				margin-right: 25rpx;
			}

			image {
				width: 350rpx;
				border-radius: 10rpx;
			}

			.right {
				display: flex;
				flex-direction: column;
				gap: 10rpx;
				text:nth-child(2){
					font-size: 20rpx;
				}
				text:nth-child(3){
					font-size: 20rpx;
				}
				text:nth-child(4){
					font-size: 20rpx;
					color: #0BCE92;
				}
				.rtitle {
					font-size: 27rpx;
					margin-bottom: 3rpx;
					font-weight: bolder;
					display: -webkit-box;
					/* 使用弹性布局 */
					-webkit-box-orient: vertical;
					/* 设置为垂直方向 */
					-webkit-line-clamp: 2;
					/* 限制显示两行文本 */
					overflow: hidden;
					/* 隐藏超出部分 */
					text-overflow: ellipsis;
					/* 显示省略号 */
					line-height: 1.5em;
					/* 行高 */
					max-height: 3em;
					/* 最大高度：2行 * 行高 */
				}
			}
		}

		.sortbox {
			width: 750rpx;
			height: 100vh;
			background-color: rgba(0, 0, 0, 0.3);
			position: fixed;
			top: 0;

			.sort {
				width: 250rpx;
				height: 400rpx;
				border-radius: 25rpx;
				background-color: #fff;
				display: flex;
				gap: 30rpx;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
				padding-top: 40rpx;
				padding-bottom: 40rpx;
				box-sizing: border-box;
				position: fixed;
				right: 30rpx;
				top: 320rpx;

				.color {
					color: #1BD097;
				}
			}
		}

		.top {
			position: sticky;
			top: 0;
			width: 90%;
			height: 200rpx;
			margin: 20rpx auto;
			background-color: #fff;
			box-shadow: 10 10 10 #fff;
			border-radius: 10px;
			box-sizing: border-box;
			box-shadow: 0px 0px 10px #ccc9c7;
			padding: 30rpx;

			.top-top {
				width: 100%;
				height: 75rpx;
				border-bottom: 1px solid #F3F3F3;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;


					.lefttext {
						border-right: 2px solid #F1F1F1;
						padding-right: 30rpx;
						margin-right: 30rpx;
						box-sizing: border-box;
					}
				}

				.content {
					width: 330rpx;
					height: 70rpx;


					.c1 {
						height: 70rpx;
						line-height: 70rpx;

						color: #9A9A9A;
					}
				}
			}

			.bottom {
				width: 100%;
				height: 50rpx;
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}

				.b1 {
					width: 200rpx;
					height: 50rpx;
					display: flex;
					align-items: center;

					.btext {
						padding-right: 60rpx;
						border-right: 2px solid #F4F4F4;
					}
				}
			}
		}

		.show {
			position: fixed;
			bottom: 0;
			width: 750rpx;
			height: 100vh;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 1000;

			.title {
				margin-top: 30rpx;
				font-size: 50rpx;
				text-align: center;
			}

			.name {
				margin-top: 50rpx;
				display: flex;
				align-items: center;
				border-bottom: solid #ccc 1px;
				padding-bottom: 30rpx;
				justify-content: space-between;

				.dq {
					width: 480rpx !important;
				}

				text {
					font-size: 40rpx;
				}

				input {
					width: 480rpx;
				}
			}

			.adddz {
				width: 750rpx;
				height: 1500rpx;
				border-top-right-radius: 40rpx;
				border-top-left-radius: 40rpx;
				background-color: #fff;
				position: fixed;
				bottom: 0;
				padding: 30rpx;
				box-sizing: border-box;

				.atype {
					width: 100%;
					height: 1500rpx;
					padding-bottom: 30rpx;
					box-sizing: border-box;
					overflow: auto;

					.bbut {
						width: 750rpx;
						height: 150rpx;
						background-color: #fff;
						position: fixed;
						bottom: 0;
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-top: 1px solid #EEEEEE;

						button:nth-child(1) {
							width: 200rpx;
							height: 100rpx;
							box-sizing: border-box;
							border-radius: 50rpx;
							background-color: #EEEEEE;
						}

						button:nth-child(2) {
							width: 400rpx;
							height: 100rpx;
							box-sizing: border-box;
							border-radius: 50rpx;
							background-color: #0BCE92;

							color: #fff;
						}

					}

					.btext {
						padding: 30rpx;
						width: 100%;
						display: flex;
						flex-wrap: wrap;
						border-radius: 1px solid #ccc;
						gap: 20rpx;
						box-sizing: border-box;

						.btext1 {
							border-radius: 50rpx;
							padding: 20rpx 40rpx 20rpx 40rpx;
							line-height: 40rpx;
							box-sizing: border-box;
							margin-bottom: 15rpx;
							border: 1px solid #DDDBDC;
						}

						.btext2 {
							border-radius: 50rpx;
							padding: 20rpx 40rpx 20rpx 40rpx;
							line-height: 40rpx;
							box-sizing: border-box;
							margin-bottom: 15rpx;
							border: 2px solid #85DABD;
							background-color: #EDFCF7;

						}
					}

					.atext {
						font-size: 30rpx;
						font-weight: bolder;

					}
				}

				.close {
					position: fixed;
					right: 30rpx;
				}

				.Savebut {
					width: 90%;
					position: fixed;
					bottom: 20rpx;
					background-color: #FF5000;
				}
			}
		}

	}
</style>